<template>
  <div v-if="hasMenuPermission" class="permission-guard">
    <slot />
  </div>
  <div v-else-if="showDenied" class="permission-denied">
    <el-empty 
      :image-size="120"
      description="权限不足"
    >
      <template #description>
        <div class="permission-denied-content">
          <el-icon class="permission-icon" size="48" color="#f56c6c">
            <Lock />
          </el-icon>
          <h3 class="permission-title">权限不足</h3>
          <p class="permission-message">
            {{ message || '您没有访问此功能的权限，请联系管理员获取相应权限。' }}
          </p>
          <div class="permission-actions">
            <el-button type="primary" @click="goBack">
              <el-icon><ArrowLeft /></el-icon>
              返回上一页
            </el-button>
            <el-button @click="goHome">
              <el-icon><House /></el-icon>
              返回首页
            </el-button>
          </div>
        </div>
      </template>
    </el-empty>
  </div>
  <div v-else class="permission-guard">
    <!-- 不显示任何内容，静默处理 -->
  </div>
</template>

<script setup lang="ts">
/**
 * 权限控制组件（仅支持菜单权限和数据权限）
 * @author Wu.Liang
 * @date 2024-12-21
 * @updated 2025-07-03 - 权限简化，仅保留菜单权限和数据权限判断
 * @description 提供菜单权限检查和数据权限检查功能
 */
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { usePermissionStore } from '@/store/permission'
import { useUserStore } from '@/store/user'
import { Lock, ArrowLeft, House } from '@element-plus/icons-vue'
import { getUserDataScope, isSuperAdmin, isSuperAdminOrPropertyCompany } from '@/utils/permission'

interface Props {
  /** 所需菜单权限 */
  permission?: string // 仅支持菜单权限编码，如 user:menu
  /** 权限不足时的提示信息 */
  message?: string
  /** 是否显示权限不足提示 */
  showDenied?: boolean
  /** 数据权限检查 */
  dataScopeCheck?: boolean
  /** 所需数据权限范围 */
  requiredDataScope?: string[]
}

const props = withDefaults(defineProps<Props>(), {
  showDenied: false,
  dataScopeCheck: false
})

const router = useRouter()
const permissionStore = usePermissionStore()
const userStore = useUserStore()

/**
 * 检查是否有菜单权限
 */
const hasMenuPermission = computed(() => {
  // 超级管理员拥有所有权限 - 最高优先级检查
  if (isSuperAdmin()) {
    console.log('PermissionGuard: 超级管理员权限检查通过')
    return true
  }

  // 检查数据权限范围
  if (props.dataScopeCheck && props.requiredDataScope?.length) {
    const userDataScope = getUserDataScope()
    const hasDataScope = props.requiredDataScope.some(scope => 
      userDataScope.includes(scope)
    )
    if (!hasDataScope) {
      console.log('PermissionGuard: 用户数据权限不足')
      return false
    }
  }

  // 检查菜单权限
  if (props.permission) {
    return permissionStore.hasMenuPermission(props.permission)
  }

  // 如果没有指定权限要求，默认有权限
  return true
})

/**
 * 返回上一页
 */
const goBack = () => {
  if (window.history.length > 1) {
    router.back()
  } else {
    router.push('/dashboard')
  }
}

/**
 * 返回首页
 */
const goHome = () => {
  router.push('/dashboard')
}
</script>

<style lang="scss" scoped>
.permission-guard {
  width: 100%;
  height: 100%;
}

.permission-denied {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 40px 20px;
  
  .permission-denied-content {
    text-align: center;
    
    .permission-icon {
      margin-bottom: 16px;
      opacity: 0.8;
    }
    
    .permission-title {
      font-size: 24px;
      font-weight: 600;
      color: #303133;
      margin: 0 0 12px 0;
    }
    
    .permission-message {
      font-size: 14px;
      color: #606266;
      margin: 0 0 24px 0;
      line-height: 1.6;
      max-width: 400px;
    }
    
    .permission-actions {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap;
      
      .el-button {
        min-width: 120px;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .permission-denied {
    padding: 20px 16px;
    
    .permission-denied-content {
      .permission-title {
        font-size: 20px;
      }
      
      .permission-message {
        font-size: 13px;
      }
      
      .permission-actions {
        flex-direction: column;
        align-items: center;
        
        .el-button {
          width: 100%;
          max-width: 200px;
        }
      }
    }
  }
}
</style> 